{% extends 'AppDashboardBundle::layout2.html.twig' %}

{% block stylesheets %}
  {{ parent() }}
{% endblock %}

{% block javascripts %}      
  {{ parent() }}
<script>
  
$( document ).ready(function() { 
  $( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
  
  
  $(".hasSupply").click(function(){
    if($(this).val() == 1)
      {
        showAdditional();
      }
  });

  

});  

var number = 1;

function addRow()
{
  var oldHtml = $("#tableTobdy").html();
  
  /*<select class="select2" style="width:100%" tabindex="-1" name="rummageProduct[]" id="rummage_1" required="required">
                        <option value="">Сонгох</option>
                      {% for productKey in productKeyArray %}
                        <option value="{{productKey.ID}}">{{productKey.product.NAME}} ({{productKey.PRICE}})</option>
                      {% endfor %}
                      </select>*/
  var html = '<tr class="customRow">'+'<td>1</td><td></td><td></td></tr>';
  $("#tableTobdy").html(oldHtml + html);
}

function removeRow()
{
  $(".customRow").last().remove();  
}

function showAdditional()
{
  {#number = number + 1;
  var html = '<div class="content controls">'+ 
              +'<div class=form-row>'+
                 +'<div class=col-md-3>Бүтээгдэхүүн:</div>'+ 
                    +'<div class=col-md-9>';  
  html = html + '<select class="select2" style="width:100%" tabindex="-1" name="products[]" id="product_'+number+'">'+
              {% for shop in shopArray %}
                +'<option value="{{shop.ID}}">{{shop.NAME}}</option>'+
              {% endfor %}
            +'</select>';
  
  html = html + '</div>'+
          + '</div>'+
        + '</div>';
      
  #}
  
  /*var x = $("#addProductContainerDiv").html();
  $("#hiddenAdditionalProductPanel").append(x+x);*/
  $("#hiddenAdditionalProductPanel").fadeIn();
  $("#hiddenAdditionalProductButtonPanel").fadeIn();
  $("#hiddenOperationalButtons").fadeIn();
  
}
function removeAdditional()
{
  $(".hiddenAdditionalProductPanel").remove();
  $("#hiddenAdditionalProductButtonPanel").fadeOut();
  $("#hiddenOperationalButtons").fadeOut();
}

</script>
{% endblock %}

{% block content %}
<div class="row"> 
  <div class="col-md-12"> 
    <ol class="breadcrumb"> 
      <li><a href="#">Нүүр</a></li> 
      <li><a href="#">Нийлүүлэлт</a></li> 
      <li class="active">Үлдэгдэл шалгах</li> 
    </ol> 
  </div> 
</div>
<form action="{{path('saveSupply')}}" method="POST" id="saveSupplyForm" name="saveSupplyForm">
  <div class=row>   
    <div class=col-md-6> 
      <div class=block> 
        <div class=header> <h2>Оруулах мэдээлэл</h2> </div> 
        <div class="content controls"> 
          <div class=form-row> 
            <div class=col-md-3>Огноо:</div> 
            <div class=col-md-9> 
              <div class=input-group> 
                <div class=input-group-addon><span class=icon-calendar-empty></span></div> 
                <input type=text class="datepicker form-control" value="{{today}}" id="date" name="date"/> 
              </div> 
            </div> 
          </div>         
        </div> 
        <div class="content controls"> 
          <div class=form-row> 
            <div class=col-md-3>Дэлгүүр : </div> 
            <div class=col-md-9> 
              <select class=select2 style=width:100% tabindex=-1 name="shopId"> 
                <option value="">Сонгох</option>
                {% for shop in shopArray%}
                  <option value="{{shop.ID}}">{{shop.NAME}}</option> 
                {% endfor %}
              </select> 
            </div> 
          </div> 
        </div> 
        <div class="content controls"> 
          <div class=form-row> 
            <div class=col-md-3>Үлдэгдэл : </div> 
            <div class=col-md-9> 
              <div class="col-md-12" style="padding: 0px 0px 10px 0px"> 
                <button class="btn" type="button" onclick="addRow()">Нэмэх</button> 
                <button class="btn btn-warning btn-clean" type="button" onclick="removeRow()">Хасах</button>
              </div>
              <table class="table table-bordered"> 
                <thead> <tr> <th>#</th> <th>Нэр</th> <th>Үлдэгдэл</th> </thead> 
                <tbody id="tableTobdy"> 
                  {% if rummageProductArray is null %}
                  <tr>
                    <td class="col-md-1">1</td> 
                    <td>
                    
                      <select class="select2" style="width:100%" tabindex="-1" name="rummageProduct[]" id="rummage_1" required="required">
                        <option value="">Сонгох</option>
                      {% for productKey in productKeyArray %}
                        <option value="{{productKey.ID}}">{{productKey.product.NAME}} ({{productKey.PRICE}})</option>
                      {% endfor %}
                      </select>
                    
                    </td> 
                    <td class="col-md-2">
                      <input type="text" class="validate[required,custom[integer],min[1],max[20]] form-control" name="rummageCount[]" id="rummageCount_1">
                    </td> 
                  </tr>
                  {% else %}
                 
                  {% endif %}
                </tbody> 
                {#<tfoot>
                  <tr>
                    <td colspan="3">
                      <button class="btn" type="button" onclick="addRow()">Нэмэх</button>
                      <button class="btn btn-warning btn-clean" type="button">Хасах</button>
                    </td>
                  </tr>
                </tfoot>#}
              </table>
            </div> 
          </div> 
        </div>

        <div class="content controls"> 
          <div class=form-row> 
            <div class=col-md-3>Нийлүүлсэн эсэх : </div> 
            <div class=col-md-4> 
              <div class=radiobox-inline> <label><input type=radio name="hasSupply" class="hasSupply" id="hasSupplyYes" value="1"/> Тийм</label> </div> 
              <div class=radiobox-inline> <label><input type=radio name="hasSupply" class="hasSupply" id="hasSupplyNo" checked="checked" value="0" onclick="removeAdditional()"/> Үгүй</label> </div>            

            </div>
            <div class=col-md-5 style="display: none" id="hiddenOperationalButtons">
              <button class="btn btn-success btn-clean" type="button">Бүтээгдэхүүн нэмэх</button>
              <button class="btn btn-warning btn-clean" type="button">Бүтээгдэхүүн хасах</button>
            </div>
          </div> 
        </div> 


      </div> 

      <div class="block hiddenAdditionalProductPanel" id="hiddenAdditionalProductPanel" style="display: none;"> 
        <div class=header> <h2>Нийлүүлэх бүтээгдэхүүн : </h2> </div> 
        <div id="addProductContainerDiv">

          <div class="content controls">
            <div class=form-row>
              <div class=col-md-3>Бүтээгдэхүүн:</div>
                <div class=col-md-9>  
                <select class="select2" style="width:100%" tabindex="-1" name="productKeys[]" id="productKeys_1" required="required">
                  <option value="">Сонгох</option>
                {% for productKey in productKeyArray %}
                    <option value="{{productKey.ID}}">{{productKey.product.NAME}} ({{productKey.PRICE}})</option>
                {% endfor %}
                </select>

              </div>
            </div>
            <div class=form-row>
              <div class=col-md-3>Тоо хэмжээ :</div>
              <div class=col-md-9>  
                <input type="text" name="quantity[]" required="required"/>
              </div>
            </div>
            <div class=form-row>
              <div class=col-md-3>Ширхэг үнэ :</div>
              <div class=col-md-9>  
                <input type="number" name="per_price[]" required="required"/>
              </div>
            </div>            
            <div class=form-row>
              <div class=col-md-3>Нийт үнэ :</div>
              <div class=col-md-9>  
                <span class="bold" id="total_1"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" id="hiddenAdditionalProductButtonPanel" style="display: none;"> 
        <div class=header> 
          <button class="btn btn-success" type="submit">Хадгалах</button>
          <button class="btn btn-warning" type="button">Цуцлах</button>
        </div>
      </div>
        
    </div> 
  </div> 
</form>

{% endblock %}
    